import {
	observable, // 用于定义可观察的状态
	runInAction, // 用于在异步操作后更新状态
	makeObservable, // 用于手动标记可观察的属性和方法
	computed, // 用于定义计算属性
	action
} from 'mobx'
import axios from 'axios'

class Store {
	constructor() {
		makeObservable(this) // 手动标记可观察的属性和方法
	}
	@observable list = [] // 定义可观察的列表

	// 计算属性
	@computed get show() {
		return this.list.length > 0
	}

	// MobX 在严格模式下要求所有对可观察状态的修改必须在 action 中进行
	@action
	setList(data) {
		this.list = data
	}

	// 异步操作
	async getList() {
		const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
		// this.setList(res.data)
		runInAction(() => {
			this.list = res.data
		})
	}
}

const store = new Store()
export default store
